<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>习题4-4</title>
        <style>
            #grad1{
                height: 200px;
                background-color: red;
                background-image: linear-gradient(red, orange);
            }
            #grad2{
                width: 300px;
                font-size: 40px;
                color: white;
                letter-spacing: 8px;
                padding-left: 220px;
                padding-top: 70px;
                float: left;
                font-weight: 800;
            }
            #grad3{
                float: left;
                width: 250px;
                padding-top: 40px;
                padding-left: 200px;
                font-size: large;
                letter-spacing: 4px;
                color: white;font-weight: 600;
            }
        </style>
    </head>

    <body>
        <div id="grad1">
            <div id="grad2">金阳光社区网</div>
            <div id="grad3">
                <h3>推进社区和谐发展</h3>
                <form>
                    <input type="text" name="search" placeholder="搜索...">
                </form>
            </div>
        </div>
    </body>
</html>